import React, { Component } from 'react'

import {List,Card,Button,Badge,Modal, message} from "antd"
//导入connect方法
import {connect} from "react-redux"
import { delNews, readNews, allRead } from '../../store/message/actionCreators'

class Message extends Component {
  constructor(){
    super();
    this.state={
      visible:false,
      delId:-1
    }
  }
  render() {
    return (
      <Card title="消息中心" extra={<Button type="primary" onClick={()=>{this.props.all_Read()}}>全部已读</Button>}>
        <Modal
					title="删除消息"
					visible={this.state.visible}
					onOk={this.confirmDel}
					onCancel={this.handleCancel}
				>
					您确认删除吗?
				</Modal>
          <List
          itemLayout="horizontal"
          dataSource={this.props.msgLists}
          renderItem={item => (
          <List.Item extra={
              <div className="caozuo">
                  <Button type="danger" onClick={()=>{this.del(item.id)}} style={{marginRight:"10px"}}>删除</Button>
                  
          <Badge dot={!item.read}> <Button disabled={item.read} onClick={()=>{this.props.read_News(item.id)}}>{item.read?"已读":"点击已读"}</Button></Badge>
              </div>
            }>
              <List.Item.Meta
                title={<span>{item.title}</span>}
                description={item.content}
              ></List.Item.Meta>
          </List.Item>
          )}
        />
      </Card>
    )
  }
  del=(id)=>{
    this.setState({
      visible:true,
      delId:id
    }) 
  }
  confirmDel=()=>{
    message.success("删除成功",1,()=>{
      this.setState({
        visible:false
      },()=>{
        this.props.del_News(this.state.delId)
      })
    })
  }
  handleCancel=()=>{
    this.setState({
      visible:false
    })
  }


}
const mapDispatchToProps = (dispatch)=>{
  return {
    del_News: (value)=>{
      dispatch(delNews(value))
    },
    read_News: (value)=>{
      dispatch(readNews(value))
    },
    all_Read:()=>{
      dispatch(allRead())
    }
  }
}
const mapStateToProps=(state)=>{
	return {
		msgLists:state.msgReducer.msgLists
	}
}
export default connect(mapStateToProps,mapDispatchToProps)(Message)
